<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        .anchorBL {
            display: none
        }

        .msg {
            width: 221px;
            height: 113px;
            background-image: url("images/bg.png");

        }

        .msg_bg_red {
            background-image: url("images/bg_red.png")
        }

        .msg_bg_green {
            background-image: url("images/bg_green.png")
        }

        .msg_bg_blue {
            background-image: url("images/bg_blue.png")
        }

        .msg .msg_left {

            width: 20%;
            height: 90%;
            float: left;
        }

        .msg .msg_left img {
            height: 50%;
            width: 100%;
            /*border: 1px solid cornflowerblue*/
        }
        .msg .msg_left canvas {
            height: 50%;
            width: 100%;
            /*border: 1px solid cornflowerblue*/
        }
        .msg .msg_right {
            margin-left: 2%;
            width: 78%;
            height: 90%;
            float: left;
            font-size: 8px;
            color: white;
        }

        .msg .msg_right .msg_right_box {
            width: 100%;
            height: 20%;
            overflow: hidden;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=kovk2Y2wibGcppY6henRhs6NGT7v3TLb"></script>
    <script type="text/javascript" src="js/yj.js"></script>
    <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>

    <title>百度地图路线途经点</title>
</head>
<body>

<!--<div class='msg' id='msgContent'>-->
<!--<div class='msg_left' align='center'>-->
<!--<img src='http://10.51.10.201:9001/middleware/20191226/924bd26090524480b024088d9e25bfd8.jpg' />-->
<!--</div>-->
<!--<div class='msg_right'>-->
<!--<div class='msg_right_box' id='carmerId'>-->
<!--摄像头名称：<span title='休息休息摄像头分打飞机'>休息休息摄像头分打飞机</span>-->
<!--</div>-->
<!--<div class='msg_right_box'>-->
<!--姓名：<span title='尼古拉斯凯奇'>尼古拉斯凯奇</span>-->
<!--</div>-->
<!--<div class='msg_right_box'>-->
<!--性别：<span title='男'>男</span>-->
<!--</div>-->
<!--<div class='msg_right_box'>-->
<!--特征：<span title='男、眼睛、有胡子'>男、眼睛、有胡子</span>-->
<!--</div>-->
<!--<div class='msg_right_box'>-->
<!--时间：<span title='2020-01-07 14:00:00'>2020-01-07 14:00:00</span>-->
<!--</div>-->
<!--</div>-->
<!--</div>-->
<!-- 播放音乐 loop="loop"-->
<audio id="notice">
    <source src="mp3/song.mp3" type="audio/mpeg">
</audio>
<button id="testclick1">测试</button>
<div id="allmap"></div>
<!-- var arrayList = '["114.253477,30.606323","114.239104,30.611607","114.282295,30.616269","114.26997,30.599827","114.302111,30.611203","114.292221,30.594853","114.301438,30.598179","114.314598,30.61414","114.304034,30.624303","114.294943,30.630518","114.303998,30.667303","114.2856,30.668918","114.261167,30.646427","114.222504,30.632693","114.162137,30.624427","114.170546,30.62076","114.17766,30.615663","114.189949,30.610069","114.203388,30.603293","114.211293,30.599314","114.218335,30.595148","114.226312,30.59148","114.246866,30.580475","114.258867,30.577863","114.270222,30.58035","114.278773,30.583708","114.286032,30.587066","114.341798,30.572624"]';-->
</body>
</html>
<script type="text/javascript">

    $(function () {
        // var timer;
        //     $("#testA1").click(function()
        //     {
        //
        //
        //       //  $("#msgContent1").animate({borderWidth:10}, 1000 ,function(e)
        //      //   {
        //       //      $("#msgContent1").css({"border":"0px solid red"});
        //      //   });
        //         var i=0;
        //         timer=setInterval(function(){
        //             if(i%2==0)
        //             {
        //                 $("#msgContent1").removeClass("msg_bg_blue");
        //                 $("#msgContent1").addClass("msg_bg_red");
        //             }else
        //             {
        //                 $("#msgContent1").removeClass("msg_bg_red");
        //                 $("#msgContent1").addClass("msg_bg_blue");
        //             }
        //             i++;
        //         },500)
        //
        //     });
        $("#testclick1").click(function()
        {
           // $("#msgContent1").removeClass("msg_bg_red","msg_bg_blue");
           //  clearInterval(timer);
            var json1 = {
                "code": 200,
                "message": "成功",
                "cmd": "WARNING",
                "data": {
                    "bgImg": "http://10.51.10.203:32080/g10203/M00/FA/C6/CjMKy14WvOuAMzJ0AACYUOUqZhg547.jpg",
                    "positionVO": {"x": 461, "y": 144, "w": 227, "h": 251, "bgWidth":1080,"bgHeight":607},
                    "score": 0.8647572,
                    "time": "2020-01-07 17:13:30",
                    "faceUrl": "http://10.51.10.201:9001/middleware/20191227/d6e6d890f7e6425bb206d30e45a4fd25.jpg",
                    "name": "4",
                    "sex": "男",
                    "idCard": "130928198905281793",
                    "age": 30,
                    "taskId": "1211837055648808961",
                    "taskName": "公司内部",
                    "taskType": "3",
                    "libName": "10000人像库",
                    "libId": "1210121197004161026",
                    "cameraRegion": "公司内部2",
                    "cameraId": "1211828133370216450"
                }
            };
            showArm(json1);

        })
    })

    //传入json坐标数据 第一个为起点最后一个为终点
    var arrayList = '["103.875625,30.693551","103.907065,30.701563","103.94156,30.712244","103.932433,30.752784"]';
    var bjson = [{"cameraID": "1210110089958686721", "cameraName": "公司内部", "lng": "103.875625", "lat": "30.693551"}
        , {"cameraID": "1211828133370216450", "cameraName": "创新中心北", "lng": "103.907065", "lat": "30.701563"}
        , {"cameraID": "1211828378753777666", "cameraName": "通信走廊", "lng": "103.94156", "lat": "30.712244"}
        , {"cameraID": "1211828609193033729", "cameraName": "汽车协同走廊", "lng": "103.875625", "lat": "30.693551"}
        , {"cameraID": "1211828796250603521", "cameraName": "大会议室走廊", "lng": "103.932433", "lat": "30.752784"}];

    // <button class="mybtnx" id="1210110089958686721" >公司内部</button>
    //     <button class="mybtnx" id="1211828133370216450" >创新中心北</button>
    //     <button class="mybtnx" id="1211828378753777666" >通信走廊</button>
    //     <button class="mybtnx" id="1211828609193033729" >汽车协同走廊</button>
    //     <button class="mybtnx" id="1211828796250603521" >大会议室走廊</button>
    //     <button class="mybtnx" id="1211829032494776322" >小会议室走廊</button>
    //     <button class="mybtnx" id="1214355239421513729" >经管北路口</button>
    //     <button class="mybtnx" id="1212678971152023554" >办公区入口</button>
    //     <button class="mybtnx" id="1214356386462994433" >展厅大门左</button>
    //     <button class="mybtnx" id="1214356599663661057" >办公区走廊</button>
    //     <button class="mybtnx" id="1214356737207472129" >办公区走廊公司门口</button>
    //所有点、gps、地图范围
    showPoly(bjson, "14");



    var websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket('ws://10.51.40.29:1993/task/webSocket/0f8692da64074b918b158c51afa2b9a4');
    } else {
        alert("该浏览器不支持websocket!");
    }
    websocket.onopen = function (event) {
        console.log('连接建立');
        websocket.send("{\"code\":200,\"message\":\"成功\",\"cmd\":\"BAYONET\",\"data\":{\"carmeraId\":\"1210110089958686721\"}}");
    }
    websocket.onclose = function (event) {
        console.log('连接关闭');
    }
    websocket.onmessage = function (event) {
        var jsondata = eval('(' + event.data + ')');
// JSON.stringify(sendjson)  toJSONString()
        console.log('接受數據'+event.data);
        if(jsondata.code==200)
        {
            if (jsondata.cmd == "WARNING") {
                showArm(jsondata);
                // showArm(json1);
                // showArm(json2);
            }
        }else
            {
                console.log('接受數據'+jsondata.message);
            }

    }
</script>